<template>
    <view class="news-tab-wrap">
        <view class="news-tab flexBox bg-fff">
            <view class="news-tab-item flex1 txt-center" :class="currentNesTab === 0 && 'news-tab-item-active'" @click="currentNesTab = 0">每日导读</view>
            <view class="news-tab-item flex1 txt-center" :class="currentNesTab === 1 && 'news-tab-item-active'" @click="currentNesTab = 1">政策法规</view>
            <view class="news-tab-item flex1 txt-center" :class="currentNesTab === 2 && 'news-tab-item-active'" @click="currentNesTab = 2">恶性事件</view>
            <view class="news-tab-item flex1 txt-center" :class="currentNesTab === 3 && 'news-tab-item-active'" @click="currentNesTab = 3">新闻报道</view>
        </view>
        <view>
            <swiper class="news-content" :circular="true" :duration="500" :current="currentNesTab" @change="newsTabChange">
                <swiper-item>
                    <news-cell :newsList="newsData[0].newsList" :type="newsData[0].type"></news-cell>
                </swiper-item>
                <swiper-item>
                    <news-cell :newsList="newsData[1].newsList" :type="newsData[1].type"></news-cell>
                </swiper-item>
                <swiper-item>
                    <news-cell :newsList="newsData[2].newsList" :type="newsData[2].type"></news-cell>
                </swiper-item>
                <swiper-item>
                    <news-cell :newsList="newsData[3].newsList" :type="newsData[3].type"></news-cell>
                </swiper-item>
            </swiper>
            <view class="pad-ver-mm txt-center col-333" @click="showMore">查看更多</view>
        </view>
    </view>
</template>

<script>
    import newsCell from './newsCell';
    export default {
        components: {
        	newsCell,
        },
        data() {
            return {
                currentNesTab: 0,
                newsData: [{
                        type: "1",
                        newsList: [
                            {
                                title: "助学贷款还没还完 培训机构却跑路了 ",
                                date: "2019-03-04 10:45:22",
                                imgUrl: "http://img.900sui.com/2019/03/04/5c7c913c06c94.jpg"
                            },
                            {
                                title: "助学贷款还没还完 培训机构却跑路了 ",
                                date: "2019-03-04 10:45:22",
                                imgUrl: "http://img.900sui.com/2019/03/04/5c7c913c06c94.jpg"
                            },
                            {
                                title: "助学贷款还没还完 培训机构却跑路了 ",
                                date: "2019-03-04 10:45:22",
                                imgUrl: "http://img.900sui.com/2019/03/04/5c7c913c06c94.jpg"
                            }
                        ]
                    },
                    {
                        type: "2",
                        newsList: [
                            {
                                title: "助学贷款还没还完 培训机构却跑路了 ",
                                date: "2019-03-04 10:45:22",
                                imgUrl: "http://img.900sui.com/2019/03/04/5c7c913c06c94.jpg"
                            },
                            {
                                title: "助学贷款还没还完 培训机构却跑路了 ",
                                date: "2019-03-04 10:45:22",
                                imgUrl: "http://img.900sui.com/2019/03/04/5c7c913c06c94.jpg"
                            },
                            {
                                title: "助学贷款还没还完 培训机构却跑路了 ",
                                date: "2019-03-04 10:45:22",
                                imgUrl: "http://img.900sui.com/2019/03/04/5c7c913c06c94.jpg"
                            }
                        ]
                    },
                    {
                        type: "3",
                        newsList: [
                            {
                                title: "助学贷款还没还完 培训机构却跑路了 ",
                                date: "2019-03-04 10:45:22",
                                imgUrl: "http://img.900sui.com/2019/03/04/5c7c913c06c94.jpg"
                            },
                            {
                                title: "助学贷款还没还完 培训机构却跑路了 ",
                                date: "2019-03-04 10:45:22",
                                imgUrl: "http://img.900sui.com/2019/03/04/5c7c913c06c94.jpg"
                            },
                            {
                                title: "助学贷款还没还完 培训机构却跑路了 ",
                                date: "2019-03-04 10:45:22",
                                imgUrl: "http://img.900sui.com/2019/03/04/5c7c913c06c94.jpg"
                            }
                        ]
                    },
                    {
                        type: "4",
                        newsList: [
                            {
                                title: "助学贷款还没还完 培训机构却跑路了 ",
                                date: "2019-03-04 10:45:22",
                                imgUrl: "http://img.900sui.com/2019/03/04/5c7c913c06c94.jpg"
                            },
                            {
                                title: "助学贷款还没还完 培训机构却跑路了 ",
                                date: "2019-03-04 10:45:22",
                                imgUrl: "http://img.900sui.com/2019/03/04/5c7c913c06c94.jpg"
                            },
                            {
                                title: "助学贷款还没还完 培训机构却跑路了 ",
                                date: "2019-03-04 10:45:22",
                                imgUrl: "http://img.900sui.com/2019/03/04/5c7c913c06c94.jpg"
                            }
                        ]
                    }
                ]
            };
        },
        methods: {
            newsTabChange({
                detail
            }) {
                console.log(detail.current);
                this.currentNesTab = detail.current;
            },
            showMore() {
                uni.navigateTo({
                	url: "../../pages/newsList/newsList?type=".concat(this.currentNesTab + 1)
                })
            }
        }
    }
</script>

<style>
    .news-tab-wrap {
        padding: 25px 15px 0;
        font-size: 15px;
        height: 400px;
    }

    .news-tab {}

    .news-tab-item {
        padding: 8px 0;
        color: #666;
    }

    .news-tab-item-active {
        color: #000;
    }

    .news-content {
        height: 315px;
    }

    .news-content-img {
        width: 120px;
        height: 90px;
    }

    .news-content-left .title {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.5;
    }

    .news-content-left .date {
        color: #666;
    }
</style>
